<script setup>
import { ref } from 'vue';
let props = defineProps({
    control: Object,
    model: Object,
})
import data from './data.json';
const show = ref(false);

let arrayValue = props.model[props.control.id] || [];

const cascaderValue = ref('');
cascaderValue.value = arrayValue[arrayValue.length - 1] || '';
let textValue = ref('');
textValue.value = arrayValue.join();
const onFinish = ({ selectedOptions }) => {
    show.value = false;
    let showValue = selectedOptions.map(option => option.label);
    props.model[props.control.id] = showValue;
    textValue.value = showValue.join();
};
</script>

<template>
    <van-field
        :name="control.id"
        v-model="textValue"
        is-link
        readonly
        :label="control.props.label"
        :placeholder="control.props.placeholder"
        :clearable="control.props.clearable"
        :disabled="control.props.disabled"
        @click="show = true"
        :rules="control.rules"
        :required="control.rules[0].required"
    />
    <van-popup v-model:show="show" round position="bottom">
        <van-cascader
            v-model="cascaderValue"
            :title="control.props.label"
            @close="show = false"
            @finish="onFinish"
            :options="data"
            :field-names="{ text: 'label', value: 'label' }"
        />
    </van-popup>
</template>